<!DOCTYPE html>
<html lang="zh">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">

<link href="css/style.min.css" rel="stylesheet">
  <link href="css/animate.css" rel="stylesheet">

  <!--对话框-->
  <link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
</head>
  
<body data-theme="dark">
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <jsp:include page="common.html"/>
    <!--左侧导航-->

    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="toolbar-btn-action">
                <button id="addBtn" onclick="showAdd()" type="button" class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</button>

              </div>
              <div class="card-body">

                <div class="table-responsive" id="department-table">


              </div>
            </div>
          </div>
        </div>

      </div>

      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<%--修改模态框开始--%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加部门</h4>
      </div>
      <div class="modal-body">
        <form id="AddFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
          <div class="form-group">
            <label class="col-md-3 control-label" for="dnameadd">部门名称</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="dnameadd" name="dnameadd" placeholder="请输入部门名称">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="dlocationadd">部门位置</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="dlocationadd" name="dlocationadd" placeholder="请输入部门位置">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="addDepartment()">确定</button>
      </div>
    </div>
  </div>
</div>
<%--模态框结束--%>
<%--修改模态框开始--%>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" >修改部门</h4>
      </div>
      <div class="modal-body">
        <form id="UpdateFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
          <div class="form-group">
            <label class="col-md-3 control-label" for="dnameUpdate">部门名称</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="dnameUpdate" name="dnameUpdate" placeholder="请输入部门名称">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="dlocationUpdate">部门位置</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="dlocationUpdate" name="dlocationUpdate" placeholder="请输入部门位置">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="updateDepartment()">确定</button>
      </div>
    </div>
  </div>
</div>
<%--模态框结束--%>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script  src="js/template-web.js"></script>
<!--对话框-->
<script src="js/jconfirm/jquery-confirm.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>


<script type="text/html" id="all_department">
  <table class="table table-hover" >

    <tr>
      <th>id</th>
      <th>部门名称</th>
      <th>部门位置</th>
      <th>操作</th>
    </tr>


    {{each data}}
    <tr>
      <th scope="row">{{$value.did}}</th>
      <td>{{$value.dname}}</td>
      <td>{{$value.dlocation}}</td>
      <td>
        <button type="button" class="btn btn-info btn-xs" onclick="showUpdate('{{$value.did}}')">修改</button>
        <button type="button" class="btn btn-danger btn-xs" onclick="daleteById('{{$value.did}}')">删除</button>
      </td>
    </tr>
    {{/each}}


  </table>
</script>
<script type="text/javascript">
  var didupdate = 0;
  function updateDepartment(){
    $.ajax({
      url:"admin/DepartmentController?action=upDepartment",
      type:'POST',
      data: {dname:$("#dnameUpdate").val(),dlocation:$("#dlocationUpdate").val(),did: didupdate  },
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          $("#updateModal").modal("hide")
          //清空数据
          $("#UpdateFrom")[0].reset();
          lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
          findAll();
        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    })
  }
  //修改模态框显示当前信息
  function showUpdate(did){
    //查询部门信息
    $.ajax({
      url:"admin/DepartmentController?action=findById",
      type:'POST',
      data: {did:did},
      dataType:'JSON',
      success:function (resp){
        didupdate = resp.data.did
        if(resp.code==10000) {
          $("#dnameUpdate").val(resp.data.dname)
          $("#dlocationUpdate").val(resp.data.dlocation)
          $("#updateModal").modal("show")
        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    })

  }
  //模态框确定按钮添加部门
  function addDepartment(){
    $.ajax({
      url:"admin/DepartmentController?action=addDepartment",
      type:'POST',
      data: {dname:$("#dnameadd").val(),dlocation:$("#dlocationadd").val() },
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          $("#addModal").modal("hide")
          //清空数据
          $("#AddFrom")[0].reset();
          lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
          findAll();
        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    })
  }
  //按钮弹出添加模态框
  function showAdd(){
    $("#addModal").modal("show")

  }

//删除数据
  function daleteById(did){
    $.alert({
      title: '删除',
      content: '您确认要删除吗',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-primary',
          action: function(){

            $.ajax({
              url:"admin/DepartmentController?action=delDepartment",
              type:'POST',
              data: {did:did},
              dataType:'JSON',
              success:function (resp){
                if(resp.code==10000){
                  lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                  console.log("111111111")
                  findAll();
                }else{
                  lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
              }
            })
          }
        },
        cancel: {
          text: '取消'
        }
      }
    });

  }
  function findAll(){
    //发送ajax请求
    $.ajax({
      url:"admin/DepartmentController?action=findAll",
      type:'POST',
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          console.log(resp)
          //渲染数据
          let table = template('all_department', {data:resp.data});
          //挂在
          $("#department-table").html(table);

        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    });
  }

    // 页面加载时获取并渲染部门数据
    findAll();
</script>
</body>
</html>